<template>
	<view class="page_wrapper page_bg">
		<view class="page_title">
			小奕口算
		</view>
		<view class="top_img_box">
			<image class="top_img" src="../../static/nimg/index_title.png" mode=""></image>
		</view>
		<view class="menu_list_block">
			<!-- <view class="menu_block_box">
				<view class="menu_block" @tap="testLogin()">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/pl.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">测试登录</view>
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view> -->
			<view class="menu_block_box">
				<view class="menu_block" @tap="mathCalc(100)">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/pl.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">口算出题-100以内</view>
						<view class="study_obj">练习对象: 一、二、三年级</view>
						<!-- <view class="study_obj">[提供下载]</view> -->
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view>
			<view class="menu_block_box">
				<view class="menu_block" @tap="mathCalc(1000)">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/pl.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">口算出题-1000以内</view>
						<view class="study_obj">练习对象: 二、三年级</view>
						<!-- <view class="study_obj">【提供下载】</view> -->
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view>
			<view class="menu_block_box">
				<view class="menu_block" @tap="mathCalcTwoOpt()">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/lc.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">两次运算-100以内</view>
						<view class="study_obj">练习对象: 二、三年级</view>
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view>

			<view class="menu_block_box">
				<view class="menu_block" @tap="numFenJie()">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/ks.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">数的分解</view>
						<view class="study_obj">练习对象: 学前班，一年级</view>
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view>
			<view class="menu_block_box">
				<view class="menu_block" @tap="numZuCheng()">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/ks.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">数的组成</view>
						<view class="study_obj">练习对象: 学前班，一年级</view>
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view>
			<view class="menu_block_box">
				<view class="menu_block" @tap="qiMeng()">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/sf.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">口算凑十法练习</view>
						<view class="study_obj">练习对象: 学前班，一年级</view>
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view>
			<view class="menu_block_box">
				<view class="menu_block" @tap="qiMengPingShiFa()">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/sf.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">口算平十法练习</view>
						<view class="study_obj">练习对象: 学前班，一年级</view>
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view>
			<!-- <view class="menu_block_box">
				<view class="menu_block" @tap="clockStudy()">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/sf.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">认识时间</view>
						<view class="study_obj">练习对象: 学前班、一年级</view>
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view> -->
			<!-- <view class="menu_block_box">
				<view class="menu_block" @tap="wordWritePrint()">
					<view class="menu_icon">
						<image mode="widthFix" src="../../static/nimg/sf.png"></image>
					</view>
					<view class="menu_center">
						<view class="menu_title">语文默写</view>
						<view class="study_obj">练习对象: 一、二、三年级</view>
					</view>
					<view class="right_btn">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<image class="menu_block_img" src="../../static/nimg/index_item.png" mode=""></image>
			</view> -->
		</view>
		<Tabbar :selectIndex="'home'" />
		<image class="page_bg_img" src="../../static/nimg/bg.png" mode=""></image>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	import {
		storageData
	} from '@/utils/storageData.js'
	import Tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				title: 'Hello',
				miniAppList: [],
				mathThink: {
					question: '',
					questionDetail: ''
				},
				showAnswerFlag: true,
			}
		},
		onLoad(options) {
			uni.getStorageInfo({
				success(res) {
					if(res.errMsg==="getStorageInfo:ok"){
						res.keys.forEach(item=>{
							if(item !="loginUser"){
								uni.removeStorageSync(item)
							}
						})
					}
				}
			});
		},
		onShow() {
			if(!uni.getStorageSync('loginUser')){
				uni.redirectTo({
					url:'/pages/login/login'
				})
			}
		},
		methods: {
			mathExamTypes() {
				uni.navigateTo({
					url: '/pages/mathExamTypes/mathExamTypes'
				})
			},
			fetchMiniAppsData() {
				request.get(
					'/miniApps/search', {}
				).then(res => {
					const accountInfo = uni.getAccountInfoSync();
					const appId = accountInfo.miniProgram.appId
					this.miniAppList = res.items.filter(item => item.appId !== appId)
				}).catch(err => {
					console.log(err)
				})
			},
			fetchTodayMathThink() {
				request.get(
					'/mathThinks/get', {}
				).then(res => {
					this.mathThink = res
				}).catch(err => {
					console.log(err)
				})
			},
			mathCalc(maxNum) {
				if (maxNum === 100) {
					uni.navigateTo({
						url: '/pages/mathExam/mathExam'
					})
				} else if (maxNum === 1000) {
					uni.navigateTo({
						url: '/pages/mathExam/mathExamThousand'
					})
				}
			},
			clockStudy() {
				uni.navigateTo({
					url: '/pages/clockStudy/clockStudy'
				})
			},
			wordWritePrint() {
				uni.navigateTo({
					url: '/pages/yuwen/wordWritePrint/wordWritePrint'
				})
			},
			mathCalcTwoOpt() {
				uni.navigateTo({
					url: '/pages/mathCalcTwoOptLogs/mathCalcTwoOptLogs'
				})
			},
			numFenJie() {
				uni.navigateTo({
					url: '/pages/numFenJie/numFenJie'
				})
			},
			numZuCheng() {
				uni.navigateTo({
					url: '/pages/numZuCheng/numZuCheng'
				})
			},
			toMiniApp(miniApp) {
				uni.navigateToMiniProgram({
					appId: miniApp.appId,
					path: miniApp.appPath,
					envVersion: 'release',
					success(res) {
						// 打开成功
						console.log("跳转小程序成功！", res);
					}
				})
			},
			qiMeng() {
				uni.navigateTo({
					url: '/pages/qiMengIndex/qiMengIndex'
				})
			},
			qiMengPingShiFa() {
				uni.navigateTo({
					url: '/pages/kouSuanQiMeng/pingShiFa/pingShiFa'
				})
			},
			toMathAssistant() {
				uni.navigateTo({
					url: '/pages/mathAssistant/mathAssistant'
				})
			},
			testLogin() {
				
			},
		},
		onShareAppMessage(res) {
			const userInfo = storageData.getLoginUser()
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '小奕口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
				imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
			}
		},
		onShareTimeline(res) {
			const userInfo = storageData.getLoginUser()
			return {
				title: '小奕口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
				imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_wrapper {
		.page_title {
			position: absolute;
			z-index: 4;
			top: 100rpx;
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			color: #063506;
		}

		overflow: hidden;

		.top_img_box {
			top: 180rpx;
			height: 270rpx;
			// width: 100%;
			padding: 0 40rpx;
			// margin: 0 auto;
			position: relative;
			z-index: 4;
		}

		.top_img {
			height: inherit;
			width: 100%;
		}

		.menu_list_block {
			height: 100%;
			padding: 10px 20px 20px 20px;
			display: flex;
			flex-direction: column;
			overflow-y: scroll;
			scrollbar-width: 0;
			position: relative;
			top: 200rpx;
			margin-bottom: 360rpx;
			z-index: 4;

			.index_txt_block {
				font-size: 16px;
				// writing-mode: vertical-rl;
				// letter-spacing: 10px;
				line-height: 30px;
				padding: 10px 10px 10px 20px;
				background-color: #f0e6da;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
				/* 块的阴影颜色 */
				display: flex;
				flex-direction: column;
			}

			.menu_block_box {
				position: relative;
			}

			.menu_block_img {
				position: relative;
				height: 160rpx;
				width: 100%;
				z-index: 3;
			}

			.menu_block {
				color: #664c28;
				/* 棕色字符，与背景色搭配 */
				// margin-bottom: 20px;
				// background-color: white;
				/* 块的阴影颜色 */
				position: absolute;
				width: 94%;
				height: 160rpx;
				flex: 1;
				padding: 0 20rpx;
				z-index: 4;
				display: flex;
				// padding: 20rpx;
				align-items: center;

				.menu_icon {
					display: flex;
					flex-wrap: wrap;
					width: 90rpx;
					/* 正方形块 */
					height: 90rpx;
					padding: 10rpx;
					border-radius: 20rpx;
					border: 1rpx solid #a4f1a4;
					/* 圆角 */
					font-weight: bold;
					/* 加粗 */
					background-color: #C9FFDF;

					/* 浅黄色背景，适合女性和小孩 */
					.char {
						font-size: 20px;
						/* 字符大小 */
						flex: 49%;
						height: 30px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.menu_center {
					flex: 1;
					margin-left: 15px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.menu_title {
						color: #074f1e;
						font-size: 30rpx;
						font-weight: bold;
					}

					.study_obj,
					.study_num {
						font-size: 24rpx;
						font-weight: 400;
						color: #246339;
					}
				}

				.right_btn {
					width: 20px;
					display: flex;
					justify-content: right;
					align-items: center;

					.right_icon {
						width: 18rpx;
						height: 30rpx;
					}
				}
			}

			.math_think_block {
				font-size: 16px;
				background-color: white;
				padding: 10px 20px 10px 20px;
				margin-top: 20px;
				margin-bottom: 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
				/* 块的阴影颜色 */
				display: flex;
				flex-direction: column;

				.block_title {
					font-size: 17px;
					padding: 10px;
				}

				.question_block {
					line-height: 30px;
					padding: 10px 10px 10px 20px;
				}

				.math_answer_block {
					line-height: 30px;
					padding: 10px 10px 10px 20px;
				}

				.answer_show_wrapper {
					padding: 10px 10px;
					display: flex;
					justify-content: center;

					.answer_show_btn {
						width: 150px;
						height: 35px;
						background-color: #d2e0cb;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.other_apps_block {
				font-size: 16px;
				background-color: white;
				padding: 10px 20px 10px 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

				/* 块的阴影颜色 */
				.apps_title_block {
					.apps_title {
						width: 100px;
						font-size: 17px;
						padding: 10px;
						border-bottom: 3px solid olivedrab;

					}
				}

				.apps_block {
					display: flex;
					flex-wrap: wrap;
					padding: 20px 0px;
					justify-content: space-around;

					.app_wrapper {
						width: 25%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 20px;

						.app_block {
							text-align: center;
							font-size: 16px;
							padding: 10px;
							width: 70px;
							height: 70px;
							border-radius: 10px;
							background-color: #d2e0cb;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}

	}
</style>